<template>
  <base-container title="Vuex">
    <h3>{{ counter }}</h3>
    <the-counter></the-counter>
    <favorite-value></favorite-value>
    <button @click="addOne">Add 10</button>
    <change-couter></change-couter>
  </base-container>
</template>

<script>
import BaseContainer from './components/BaseContainer.vue';
import TheCounter from './components/TheCounter.vue';
import ChangeCouter from './components/ChangeCouter.vue';
import FavoriteValue from './components/FavoriteValue.vue';

export default {
  components: {
    BaseContainer,
    TheCounter,
    ChangeCouter,
    FavoriteValue,
  },

  methods: {
    addOne() {
      this.$store.dispatch({
        type: 'increase',
        value: 10,
      });
    },
  },
  data() {},
};
</script>

<style>
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}
</style>
